<template>
	<section class="sys-menu">
		<el-button type="primary" style="margin-bottom: 10px" @click="openDialog">
			新增
		</el-button>
		<el-table :data="tableData" row-key="id" default-expand-all>
			<el-table-column prop="title" label="标题" />
			<el-table-column prop="name" label="标识" />
			<el-table-column prop="path" label="路径" />
			<el-table-column label="显示">
				<template #default="scope">
					<el-tag :type="scope.row.show ? 'success' : 'danger'">
						{{ scope.row.show ? ' 显示' : '隐藏' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template #default="scope">
					<el-popconfirm
						title="是否确定删除当前数据"
						width="200px"
						confirm-button-text="确定"
						cancel-button-text="取消"
						@confirm="delMenu(scope.row.id)"
					>
						<template #reference>
							<el-button text type="danger"> 删除 </el-button>
						</template>
					</el-popconfirm>
					<el-button type="success" text @click="updateMenu(scope.row)">
						修改
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog
			v-model="visible"
			title="菜单管理"
			center
			width="800px"
			@close="closeDialog"
		>
			<el-form :model="formData" label-width="120px">
				<el-form-item
					label="父节点"
					prop="parentId"
					:rules="[
						{
							required: true,
							message: '父节点不能为空',
							trigger: 'change',
						},
					]"
				>
					<el-tree-select
						v-model="formData.parentId"
						:data="menuTree"
						check-strictly
					/>
				</el-form-item>
				<el-form-item
					label="标题"
					prop="title"
					:rules="[
						{
							required: true,
							message: '标题不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input v-model="formData.title" />
				</el-form-item>
				<el-form-item
					label="标识"
					prop="name"
					:rules="[
						{
							required: true,
							message: '标识不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input v-model="formData.name" />
				</el-form-item>
				<el-form-item
					label="路径"
					prop="path"
					:rules="[
						{
							required: true,
							message: '路径不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input v-model="formData.path" />
				</el-form-item>
				<el-form-item
					label="是否显示"
					prop="show"
					:rules="[
						{
							required: true,
							message: '是否显示不能为空',
							trigger: 'change',
						},
					]"
				>
					<el-switch v-model="formData.show" />
				</el-form-item>
				<el-form-item
					label="排序"
					prop="sort"
					:rules="[
						{
							required: true,
							message: '排序不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input-number v-model="formData.sort" :controls="false" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitMenu">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</section>
</template>

<script setup>
import useTableData from '@/util/useTableData.js'
import { computed, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import useAdminStore from '@/store/index.js'

const adminStore = useAdminStore()
const visible = ref(false)
const operate = ref('new')

const formData = reactive({
	title: '',
	name: '',
	show: true,
	sort: 999,
	path: '',
	parentId: '0',
})

const { tableData, addRow, delRow, updateRow } = useTableData({
	getList: {
		url: '/menu/getMenuList',
		params: {
			page: 1,
			pageSize: 999,
		},
	},
})

const submitMenu = async () => {
	try {
		if (operate.value === 'new') {
			await addRow('/menu/addBaseMenu', formData)
		} else {
			await updateRow('/menu/updateBaseMenu', formData)
		}
		closeDialog()
		ElMessage.success('配置成功')
		visible.value = false
		adminStore.menu = await adminStore.setMenu()
	} catch (err) {
		console.log(err)
	}
}

const formatTree = (arr) => {
	arr.forEach((item) => {
		item.label = item.title
		item.value = item.id.toString()
		if (item.children && item.children.length > 0) {
			formatTree(item.children)
		}
	})
	return arr
}

const menuTree = computed(() => {
	return [
		{
			value: '0',
			label: '根节点',
			children: formatTree(tableData.value),
		},
	]
})
const openDialog = () => {
	operate.value = 'new'
	visible.value = true
}
const updateMenu = (params) => {
	operate.value = 'update'
	visible.value = true
	Object.assign(formData, params)
}

const closeDialog = () => {
	Object.keys(formData).forEach((item) => {
		if (item === 'title' || item === 'name' || item === 'path') {
			formData[item] = ''
		} else if (item === 'parentId') {
			formData.parentId = '0'
		} else if (item === 'show') {
			formData.show = true
		} else if (item === 'sort') {
			formData.sort = 999
		} else {
			delete formData[item]
		}
	})
}

const delMenu = (id) => {
	delRow('/menu/deleteBaseMenu', { id: id })
}
</script>

<style scoped>
.sys-menu {
	padding: 10px 20px;
}
:deep(.el-input-number .el-input__inner) {
	text-align: left;
}
:deep(.el-input-number) {
	width: 100%;
}
</style>
